<template>
<div>

	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				消息列表
			</div>
		</div>
	</div>

	<!-- <div style="padding"> -->
	<el-row class="bbg1">
	<el-form :inline="true" :model="form" >
		<el-form-item >
		    <el-input v-model="form.title" placeholder="标题" style="width:240px;"></el-input>
		</el-form-item>
		<el-form-item>
		    <el-button type="primary" @click="search" style="background:#21A5F0;width:140px;border:1px solid rgba(11, 178, 248);">查 询</el-button>
		</el-form-item>
		<el-form-item>
		    <el-button type="success" @click="add" style="background:#19A65B;width:140px;border:1px solid rgba(31, 231, 124);">创建</el-button>
		</el-form-item>
	</el-form>
	</el-row>

	<el-row class="bbg2">
	<el-table
	    :data="messageList.results"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#fff',    
		}"
	    border
	    height="740"
	    :row-style="{
	    	height : '69px'
	    }"
	    style="background:#083749;">
	    <el-table-column
	      prop="title"
	      label="标题"
	      align="center"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="content"
	      align="center"
	      show-overflow-tooltip
	      label="内容">
	    </el-table-column>
	    <el-table-column
	      width="100"
	      align="center"
	      label="发布状态">
	      	<template v-if="scope.row.id" slot-scope="scope">
	      		<span v-if="scope.row.release_status == '0'">未发布</span>
	      		<span v-else >已发布</span>
	      	</template>
	    </el-table-column>
	    <el-table-column
	      prop="release_time"
	      label="发布时间"
	      align="center"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      width="220"
	      align="center"
	      label="操作">
	      	<template v-if="scope.row.id" slot-scope="scope">
	      		<el-button type="primary" size="mini" 
	      		v-if="scope.row.release_status == '0'"
	      		@click="up(scope.row)"
	      		style="background:#21A5F0;width:100px;"
	      		>
	      			发布
	      		</el-button>
	      		<el-button type="warning" size="mini" 
	      		v-if="scope.row.release_status == '1'"
	      		@click="down(scope.row)"
	      		style="background-color:#C08812;width:100px;"
	      		>
	      			撤 销
	      		</el-button>
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-view" circle
	      		@click="info(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>
	</el-row>

	<el-row class="bbg1 text-center pt30 pb20">
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageNo"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next"
		  :total="messageList.totalRecord">
		</el-pagination>
	</el-row>

	<!-- </div> -->

<el-dialog
  title="消息"
  :visible.sync="dialogVisible"
  width="530px">
  
  	<el-form ref="current"  :model="current" label-width="70px"
  	:rules="rules" style="color:#fff;"
  	>
		<el-form-item  label="标题：" prop="title" >
			<el-input v-if="current.id == undefined" v-model="current.title" placeholder="请输入消息标题" style="width:400px;"></el-input>
			<span v-else>{{current.title}}</span>
		</el-form-item>

		<el-form-item label="内容："  >
			<el-input v-if="current.id == undefined" type="textarea" v-model="current.content" style="width:400px;" 
			:autosize="{ minRows: 5, maxRows: 25}"
			maxlength="300"
  			show-word-limit
			></el-input>
			<span v-else>{{current.content}}</span>
		</el-form-item>

		<el-form-item v-if="current.id == undefined" >
			<el-row style="width:400px;">
			  <el-col :span="12">
			  	<el-button type="primary" :disabled="btnDisabled" @click="save"
			  	style="width:100px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
			  	>
					保 存
				</el-button>
			  	
			  </el-col>
			  <el-col :span="12" class="text-right">
			  	<el-button @click="dialogVisible = false"
			  	style="width:100px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1); color:#fff;"
			  	>取 消</el-button>
			  </el-col>
			</el-row>
		</el-form-item>

	</el-form>

	<!-- <span slot="footer" class="dialog-footer" v-if="current.id == undefined">
		<el-button @click="dialogVisible = false">取 消</el-button>
		<el-button type="primary" :disabled="btnDisabled" @click="save">
			保 存
		</el-button>
	</span> -->

	<!-- <span v-else><br></span> -->
</el-dialog>

</div>
</template>

<script>


export default {
	
	name : 'messagelist1',
	
	data () {
		return {
		  	messageList : {},

		  	form : {},

		  	pageNo : 1,
		  	pageSize : 10,

		  	current : {},

		  	dialogVisible : false,

		  	btnDisabled : false,

		  	rules: {
				title: [
					{ required: true, message: '请输入消息标题', trigger: 'blur' },
				],
			},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 'messageList',
				title : this.form.title,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					//this.messageList = res;
					this.messageList = this.$util.tableAdd(res);
				}
			});
		},

		add () {
			this.dialogVisible = true;
			this.current = {};
		},

		info (item) {
			console.log(item);
			this.current = item;
			this.dialogVisible = true;
		},

		del (item) {

			this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'deleteMessage',
	        		id : item.id,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},

		save () {
			this.$refs['current'].validate((valid) => {
	          if (valid) {
	            this.btnDisabled = true;
		            this.$http({
					fun : 'createMessage1',
					...this.current,
					cb : res => {
						console.log(res);
						this.btnDisabled = false;
						this.$message.success('操作成功');
						this.dialogVisible = false;
						this.init();
					},
					err : res => {
						this.$message.error(res);
						this.btnDisabled = false;
					}
				});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},

		up (item) {
			this.$http({
				fun : 'createMessage',
				id : item.id,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.init();
				}
			});
		},

		down (item) {
			this.$http({
				fun : 'messageDown',
				id : item.id,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.init();
				}
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
